<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"> <style>
	.KEYW {color: #933;}
	.COMM {color: #bbb; font-style: italic;}
	.NUMB {color: #393;}
	.STRN {color: #393;}
	.REGX {color: #339;}
	.line {border-right: 1px dotted #666; color: #666; font-style: normal;}
	</style></head><body><pre><span class='line'>  1</span> <span class="COMM">/**
<span class='line'>  2</span>  * Constructs a new, empty panel with default properties. Panels, with the
<span class='line'>  3</span>  * exception of the root panel, are not typically constructed directly; instead,
<span class='line'>  4</span>  * they are added to an existing panel or mark via {@link pv.Mark#add}.
<span class='line'>  5</span>  *
<span class='line'>  6</span>  * @class Represents a container mark. Panels allow repeated or nested
<span class='line'>  7</span>  * structures, commonly used in small multiple displays where a small
<span class='line'>  8</span>  * visualization is tiled to facilitate comparison across one or more
<span class='line'>  9</span>  * dimensions. Other types of visualizations may benefit from repeated and
<span class='line'> 10</span>  * possibly overlapping structure as well, such as stacked area charts. Panels
<span class='line'> 11</span>  * can also offset the position of marks to provide padding from surrounding
<span class='line'> 12</span>  * content.
<span class='line'> 13</span>  *
<span class='line'> 14</span>  * &lt;p>All Protovis displays have at least one panel; this is the root panel to
<span class='line'> 15</span>  * which marks are rendered. The box model properties (four margins, width and
<span class='line'> 16</span>  * height) are used to offset the positions of contained marks. The data
<span class='line'> 17</span>  * property determines the panel count: a panel is generated once per associated
<span class='line'> 18</span>  * datum. When nested panels are used, property functions can declare additional
<span class='line'> 19</span>  * arguments to access the data associated with enclosing panels.
<span class='line'> 20</span>  *
<span class='line'> 21</span>  * &lt;p>Panels can be rendered inline, facilitating the creation of sparklines.
<span class='line'> 22</span>  * This allows designers to reuse browser layout features, such as text flow and
<span class='line'> 23</span>  * tables; designers can also overlay HTML elements such as rich text and
<span class='line'> 24</span>  * images.
<span class='line'> 25</span>  *
<span class='line'> 26</span>  * &lt;p>All panels have a &lt;tt>children&lt;/tt> array (possibly empty) containing the
<span class='line'> 27</span>  * child marks in the order they were added. Panels also have a &lt;tt>root&lt;/tt>
<span class='line'> 28</span>  * field which points to the root (outermost) panel; the root panel's root field
<span class='line'> 29</span>  * points to itself.
<span class='line'> 30</span>  *
<span class='line'> 31</span>  * &lt;p>See also the &lt;a href="../../api/">Protovis guide&lt;/a>.
<span class='line'> 32</span>  *
<span class='line'> 33</span>  * @extends pv.Bar
<span class='line'> 34</span>  */</span><span class="WHIT">
<span class='line'> 35</span> </span><span class="NAME">pv.Panel</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 36</span> </span><span class="WHIT">  </span><span class="NAME">pv.Bar.call</span><span class="PUNC">(</span><span class="KEYW">this</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 37</span> 
<span class='line'> 38</span> </span><span class="WHIT">  </span><span class="COMM">/**
<span class='line'> 39</span>    * The child marks; zero or more {@link pv.Mark}s in the order they were
<span class='line'> 40</span>    * added.
<span class='line'> 41</span>    *
<span class='line'> 42</span>    * @see #add
<span class='line'> 43</span>    * @type pv.Mark[]
<span class='line'> 44</span>    */</span><span class="WHIT">
<span class='line'> 45</span> </span><span class="WHIT">  </span><span class="NAME">this.children</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 46</span> </span><span class="WHIT">  </span><span class="NAME">this.root</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">this</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 47</span> 
<span class='line'> 48</span> </span><span class="WHIT">  </span><span class="COMM">/**
<span class='line'> 49</span>    * The internal $dom field is set by the Protovis loader; see lang/init.js. It
<span class='line'> 50</span>    * refers to the script element that contains the Protovis specification, so
<span class='line'> 51</span>    * that the panel knows where in the DOM to insert the generated SVG element.
<span class='line'> 52</span>    *
<span class='line'> 53</span>    * @private
<span class='line'> 54</span>    */</span><span class="WHIT">
<span class='line'> 55</span> </span><span class="WHIT">  </span><span class="NAME">this.$dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">pv.$</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">pv.$.s</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 56</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 57</span> 
<span class='line'> 58</span> </span><span class="NAME">pv.Panel.prototype</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">pv.extend</span><span class="PUNC">(</span><span class="NAME">pv.Bar</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'> 59</span> </span><span class="WHIT">    </span><span class="PUNC">.</span><span class="NAME">property</span><span class="PUNC">(</span><span class="STRN">"transform"</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'> 60</span> </span><span class="WHIT">    </span><span class="PUNC">.</span><span class="NAME">property</span><span class="PUNC">(</span><span class="STRN">"overflow"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">String</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'> 61</span> </span><span class="WHIT">    </span><span class="PUNC">.</span><span class="NAME">property</span><span class="PUNC">(</span><span class="STRN">"canvas"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">c</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 62</span> </span><span class="WHIT">        </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">typeof</span><span class="WHIT"> </span><span class="NAME">c</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="STRN">"string"</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'> 63</span> </span><span class="WHIT">            </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">document.getElementById</span><span class="PUNC">(</span><span class="NAME">c</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'> 64</span> </span><span class="WHIT">            </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">c</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">// assume that c is the passed-in element</span><span class="WHIT">
<span class='line'> 65</span> </span><span class="WHIT">      </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 66</span> 
<span class='line'> 67</span> </span><span class="NAME">pv.Panel.prototype.type</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"panel"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 68</span> 
<span class='line'> 69</span> </span><span class="COMM">/**
<span class='line'> 70</span>  * The canvas element; either the string ID of the canvas element in the current
<span class='line'> 71</span>  * document, or a reference to the canvas element itself. If null, a canvas
<span class='line'> 72</span>  * element will be created and inserted into the document at the location of the
<span class='line'> 73</span>  * script element containing the current Protovis specification. This property
<span class='line'> 74</span>  * only applies to root panels and is ignored on nested panels.
<span class='line'> 75</span>  *
<span class='line'> 76</span>  * &lt;p>Note: the "canvas" element here refers to a &lt;tt>div&lt;/tt> (or other suitable
<span class='line'> 77</span>  * HTML container element), &lt;i>not&lt;/i> a &lt;tt>canvas&lt;/tt> element. The name of
<span class='line'> 78</span>  * this property is a historical anachronism from the first implementation that
<span class='line'> 79</span>  * used HTML 5 canvas, rather than SVG.
<span class='line'> 80</span>  *
<span class='line'> 81</span>  * @type string
<span class='line'> 82</span>  * @name pv.Panel.prototype.canvas
<span class='line'> 83</span>  */</span><span class="WHIT">
<span class='line'> 84</span> 
<span class='line'> 85</span> </span><span class="COMM">/**
<span class='line'> 86</span>  * Specifies whether child marks are clipped when they overflow this panel.
<span class='line'> 87</span>  * This affects the clipping of all this panel's descendant marks.
<span class='line'> 88</span>  *
<span class='line'> 89</span>  * @type string
<span class='line'> 90</span>  * @name pv.Panel.prototype.overflow
<span class='line'> 91</span>  * @see &lt;a href="http://www.w3.org/TR/CSS2/visufx.html#overflow">CSS2&lt;/a>
<span class='line'> 92</span>  */</span><span class="WHIT">
<span class='line'> 93</span> 
<span class='line'> 94</span> </span><span class="COMM">/**
<span class='line'> 95</span>  * The transform to be applied to child marks. The default transform is
<span class='line'> 96</span>  * identity, which has no effect. Note that the panel's own fill and stroke are
<span class='line'> 97</span>  * not affected by the transform, and panel's transform only affects the
<span class='line'> 98</span>  * &lt;tt>scale&lt;/tt> of child marks, not the panel itself.
<span class='line'> 99</span>  *
<span class='line'>100</span>  * @type pv.Transform
<span class='line'>101</span>  * @name pv.Panel.prototype.transform
<span class='line'>102</span>  * @see pv.Mark#scale
<span class='line'>103</span>  */</span><span class="WHIT">
<span class='line'>104</span> 
<span class='line'>105</span> </span><span class="COMM">/**
<span class='line'>106</span>  * Default properties for panels. By default, the margins are zero, the fill
<span class='line'>107</span>  * style is transparent.
<span class='line'>108</span>  *
<span class='line'>109</span>  * @type pv.Panel
<span class='line'>110</span>  */</span><span class="WHIT">
<span class='line'>111</span> </span><span class="NAME">pv.Panel.prototype.defaults</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">pv.Panel</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'>112</span> </span><span class="WHIT">    </span><span class="PUNC">.</span><span class="NAME">extend</span><span class="PUNC">(</span><span class="NAME">pv.Bar.prototype.defaults</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'>113</span> </span><span class="WHIT">    </span><span class="PUNC">.</span><span class="NAME">fillStyle</span><span class="PUNC">(</span><span class="KEYW">null</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="COMM">// override Bar default</span><span class="WHIT">
<span class='line'>114</span> </span><span class="WHIT">    </span><span class="PUNC">.</span><span class="NAME">overflow</span><span class="PUNC">(</span><span class="STRN">"visible"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>115</span> 
<span class='line'>116</span> </span><span class="COMM">/**
<span class='line'>117</span>  * Returns an anchor with the specified name. This method is overridden such
<span class='line'>118</span>  * that adding to a panel's anchor adds to the panel, rather than to the panel's
<span class='line'>119</span>  * parent.
<span class='line'>120</span>  *
<span class='line'>121</span>  * @param {string} name the anchor name; either a string or a property function.
<span class='line'>122</span>  * @returns {pv.Anchor} the new anchor.
<span class='line'>123</span>  */</span><span class="WHIT">
<span class='line'>124</span> </span><span class="NAME">pv.Panel.prototype.anchor</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">name</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>125</span> </span><span class="WHIT">  </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">anchor</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">pv.Bar.prototype.anchor.call</span><span class="PUNC">(</span><span class="KEYW">this</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">name</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>126</span> </span><span class="WHIT">  </span><span class="NAME">anchor.parent</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">this</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>127</span> </span><span class="WHIT">  </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">anchor</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>128</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>129</span> 
<span class='line'>130</span> </span><span class="COMM">/**
<span class='line'>131</span>  * Adds a new mark of the specified type to this panel. Unlike the normal
<span class='line'>132</span>  * {@link Mark#add} behavior, adding a mark to a panel does not cause the mark
<span class='line'>133</span>  * to inherit from the panel. Since the contained marks are offset by the panel
<span class='line'>134</span>  * margins already, inheriting properties is generally undesirable; of course,
<span class='line'>135</span>  * it is always possible to change this behavior by calling {@link Mark#extend}
<span class='line'>136</span>  * explicitly.
<span class='line'>137</span>  *
<span class='line'>138</span>  * @param {function} type the type of the new mark to add.
<span class='line'>139</span>  * @returns {pv.Mark} the new mark.
<span class='line'>140</span>  */</span><span class="WHIT">
<span class='line'>141</span> </span><span class="NAME">pv.Panel.prototype.add</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">type</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>142</span> </span><span class="WHIT">  </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">child</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">type</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>143</span> </span><span class="WHIT">  </span><span class="NAME">child.parent</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">this</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>144</span> </span><span class="WHIT">  </span><span class="NAME">child.root</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.root</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>145</span> </span><span class="WHIT">  </span><span class="NAME">child.childIndex</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.children.length</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>146</span> </span><span class="WHIT">  </span><span class="NAME">this.children.push</span><span class="PUNC">(</span><span class="NAME">child</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>147</span> </span><span class="WHIT">  </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">child</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>148</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>149</span> 
<span class='line'>150</span> </span><span class="COMM">/** @private Bind this panel, then any child marks recursively. */</span><span class="WHIT">
<span class='line'>151</span> </span><span class="NAME">pv.Panel.prototype.bind</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>152</span> </span><span class="WHIT">  </span><span class="NAME">pv.Mark.prototype.bind.call</span><span class="PUNC">(</span><span class="KEYW">this</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>153</span> </span><span class="WHIT">  </span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">this.children.length</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>154</span> </span><span class="WHIT">    </span><span class="NAME">this.children</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">.</span><span class="NAME">bind</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>155</span> </span><span class="WHIT">  </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>156</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>157</span> 
<span class='line'>158</span> </span><span class="COMM">/**
<span class='line'>159</span>  * @private Evaluates all of the properties for this panel for the specified
<span class='line'>160</span>  * instance &lt;tt>s&lt;/tt> in the scene graph, including recursively building the
<span class='line'>161</span>  * scene graph for child marks.
<span class='line'>162</span>  *
<span class='line'>163</span>  * @param s a node in the scene graph; the instance of the panel to build.
<span class='line'>164</span>  * @see Mark#scene
<span class='line'>165</span>  */</span><span class="WHIT">
<span class='line'>166</span> </span><span class="NAME">pv.Panel.prototype.buildInstance</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">s</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>167</span> </span><span class="WHIT">  </span><span class="NAME">pv.Bar.prototype.buildInstance.call</span><span class="PUNC">(</span><span class="KEYW">this</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">s</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>168</span> </span><span class="WHIT">  </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">s.visible</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="KEYW">return</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>169</span> </span><span class="WHIT">  </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">s.children</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="NAME">s.children</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>170</span> 
<span class='line'>171</span> </span><span class="WHIT">  </span><span class="COMM">/*
<span class='line'>172</span>    * Multiply the current scale factor by this panel's transform. Also clear the
<span class='line'>173</span>    * default index as we recurse into child marks; it will be reset to the
<span class='line'>174</span>    * current index when the next panel instance is built.
<span class='line'>175</span>    */</span><span class="WHIT">
<span class='line'>176</span> </span><span class="WHIT">  </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">scale</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.scale</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NAME">s.transform.k</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">child</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">n</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.children.length</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>177</span> </span><span class="WHIT">  </span><span class="NAME">pv.Mark.prototype.index</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="NUMB">1</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>178</span> 
<span class='line'>179</span> </span><span class="WHIT">  </span><span class="COMM">/*
<span class='line'>180</span>    * Build each child, passing in the parent (this panel) scene graph node. The
<span class='line'>181</span>    * child mark's scene is initialized from the corresponding entry in the
<span class='line'>182</span>    * existing scene graph, such that properties from the previous build can be
<span class='line'>183</span>    * reused; this is largely to facilitate the recycling of SVG elements.
<span class='line'>184</span>    */</span><span class="WHIT">
<span class='line'>185</span> </span><span class="WHIT">  </span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">n</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>186</span> </span><span class="WHIT">    </span><span class="NAME">child</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.children</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>187</span> </span><span class="WHIT">    </span><span class="NAME">child.scene</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">s.children</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">// possibly undefined</span><span class="WHIT">
<span class='line'>188</span> </span><span class="WHIT">    </span><span class="NAME">child.scale</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">scale</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>189</span> </span><span class="WHIT">    </span><span class="NAME">child.build</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>190</span> </span><span class="WHIT">  </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>191</span> 
<span class='line'>192</span> </span><span class="WHIT">  </span><span class="COMM">/*
<span class='line'>193</span>    * Once the child marks have been built, the new scene graph nodes are removed
<span class='line'>194</span>    * from the child marks and placed into the scene graph. The nodes cannot
<span class='line'>195</span>    * remain on the child nodes because this panel (or a parent panel) may be
<span class='line'>196</span>    * instantiated multiple times!
<span class='line'>197</span>    */</span><span class="WHIT">
<span class='line'>198</span> </span><span class="WHIT">  </span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">n</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>199</span> </span><span class="WHIT">    </span><span class="NAME">child</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.children</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>200</span> </span><span class="WHIT">    </span><span class="NAME">s.children</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">child.scene</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>201</span> </span><span class="WHIT">    </span><span class="KEYW">delete</span><span class="WHIT"> </span><span class="NAME">child.scene</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>202</span> </span><span class="WHIT">    </span><span class="KEYW">delete</span><span class="WHIT"> </span><span class="NAME">child.scale</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>203</span> </span><span class="WHIT">  </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>204</span> 
<span class='line'>205</span> </span><span class="WHIT">  </span><span class="COMM">/* Delete any expired child scenes. */</span><span class="WHIT">
<span class='line'>206</span> </span><span class="WHIT">  </span><span class="NAME">s.children.length</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">n</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>207</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>208</span> 
<span class='line'>209</span> </span><span class="COMM">/**
<span class='line'>210</span>  * @private Computes the implied properties for this panel for the specified
<span class='line'>211</span>  * instance &lt;tt>s&lt;/tt> in the scene graph. Panels have two implied
<span class='line'>212</span>  * properties:&lt;ul>
<span class='line'>213</span>  *
<span class='line'>214</span>  * &lt;li>The &lt;tt>canvas&lt;/tt> property references the DOM element, typically a DIV,
<span class='line'>215</span>  * that contains the SVG element that is used to display the visualization. This
<span class='line'>216</span>  * property may be specified as a string, referring to the unique ID of the
<span class='line'>217</span>  * element in the DOM. The string is converted to a reference to the DOM
<span class='line'>218</span>  * element. The width and height of the SVG element is inferred from this DOM
<span class='line'>219</span>  * element. If no canvas property is specified, a new SVG element is created and
<span class='line'>220</span>  * inserted into the document, using the panel dimensions; see
<span class='line'>221</span>  * {@link #createCanvas}.
<span class='line'>222</span>  *
<span class='line'>223</span>  * &lt;li>The &lt;tt>children&lt;/tt> array, while not a property per se, contains the
<span class='line'>224</span>  * scene graph for each child mark. This array is initialized to be empty, and
<span class='line'>225</span>  * is populated above in {@link #buildInstance}.
<span class='line'>226</span>  *
<span class='line'>227</span>  * &lt;/ul>The current implementation creates the SVG element, if necessary, during
<span class='line'>228</span>  * the build phase; in the future, it may be preferrable to move this to the
<span class='line'>229</span>  * update phase, although then the canvas property would be undefined. In
<span class='line'>230</span>  * addition, DOM inspection is necessary to define the implied width and height
<span class='line'>231</span>  * properties that may be inferred from the DOM.
<span class='line'>232</span>  *
<span class='line'>233</span>  * @param s a node in the scene graph; the instance of the panel to build.
<span class='line'>234</span>  */</span><span class="WHIT">
<span class='line'>235</span> </span><span class="NAME">pv.Panel.prototype.buildImplied</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">s</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>236</span> </span><span class="WHIT">  </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">this.parent</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>237</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">c</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">s.canvas</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>238</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">c</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>239</span> </span><span class="WHIT">      </span><span class="COMM">/* Clear the container if it's not associated with this panel. */</span><span class="WHIT">
<span class='line'>240</span> </span><span class="WHIT">      </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">c.$panel</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="KEYW">this</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>241</span> </span><span class="WHIT">        </span><span class="NAME">c.$panel</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">this</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>242</span> </span><span class="WHIT">        </span><span class="KEYW">while</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">c.lastChild</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="NAME">c.removeChild</span><span class="PUNC">(</span><span class="NAME">c.lastChild</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>243</span> </span><span class="WHIT">      </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>244</span> 
<span class='line'>245</span> </span><span class="WHIT">      </span><span class="COMM">/* If width and height weren't specified, inspect the container. */</span><span class="WHIT">
<span class='line'>246</span> </span><span class="WHIT">      </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">w</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">h</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>247</span> </span><span class="WHIT">      </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">s.width</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="KEYW">null</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>248</span> </span><span class="WHIT">        </span><span class="NAME">w</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">parseFloat</span><span class="PUNC">(</span><span class="NAME">pv.css</span><span class="PUNC">(</span><span class="NAME">c</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"width"</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>249</span> </span><span class="WHIT">        </span><span class="NAME">s.width</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">w</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">s.left</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">s.right</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>250</span> </span><span class="WHIT">      </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>251</span> </span><span class="WHIT">      </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">s.height</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="KEYW">null</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>252</span> </span><span class="WHIT">        </span><span class="NAME">h</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">parseFloat</span><span class="PUNC">(</span><span class="NAME">pv.css</span><span class="PUNC">(</span><span class="NAME">c</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"height"</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>253</span> </span><span class="WHIT">        </span><span class="NAME">s.height</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">h</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">s.top</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">s.bottom</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>254</span> </span><span class="WHIT">      </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>255</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT"> </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>256</span> </span><span class="WHIT">      </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">cache</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.$canvas</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.$canvas</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>257</span> </span><span class="WHIT">      </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="PUNC">(</span><span class="NAME">c</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">cache</span><span class="PUNC">[</span><span class="NAME">this.index</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>258</span> </span><span class="WHIT">        </span><span class="NAME">c</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">cache</span><span class="PUNC">[</span><span class="NAME">this.index</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">"span"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>259</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.$dom</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT"> </span><span class="COMM">// script element for text/javascript+protovis</span><span class="WHIT">
<span class='line'>260</span> </span><span class="WHIT">          </span><span class="NAME">this.$dom.parentNode.insertBefore</span><span class="PUNC">(</span><span class="NAME">c</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">this.$dom</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>261</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT"> </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT"> </span><span class="COMM">// find the last element in the body</span><span class="WHIT">
<span class='line'>262</span> </span><span class="WHIT">          </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">n</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.body</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>263</span> </span><span class="WHIT">          </span><span class="KEYW">while</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">n.lastChild</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">n.lastChild.tagName</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="NAME">n</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">n.lastChild</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>264</span> </span><span class="WHIT">          </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">n</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">document.body</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="NAME">n</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">n.parentNode</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>265</span> </span><span class="WHIT">          </span><span class="NAME">n.appendChild</span><span class="PUNC">(</span><span class="NAME">c</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>266</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>267</span> </span><span class="WHIT">      </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>268</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>269</span> </span><span class="WHIT">    </span><span class="NAME">s.canvas</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">c</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>270</span> </span><span class="WHIT">  </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>271</span> </span><span class="WHIT">  </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">s.transform</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="NAME">s.transform</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">pv.Transform.identity</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>272</span> </span><span class="WHIT">  </span><span class="NAME">pv.Mark.prototype.buildImplied.call</span><span class="PUNC">(</span><span class="KEYW">this</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">s</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>273</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>274</span> </span></pre></body></html>